<template>
  <div class="index-container">
      <!-- <Tinymce v-model="value" :height="200" /> -->
      <RayTable
        ref="table"
        :menu="menu"
        :data_object_no="menu.data_object_no"
        :height="tableHeight"
        :custom_columns="custom_columns"
        :right_menu="right_menu"
        @menu_click_event="menuClick"
      >
        <template #test1="{row}">
          <el-input v-model="row.test1" size="mini" />
        </template>
        <template #test2="{row}">
          <el-input v-model="row.test2" size="mini" />
        </template>
        <template #test3="{row}">
          <el-input v-model="row.test3" size="mini" />
        </template>
        <template #head_btn_prepend="{rows}">
          <el-button v-if="$ButtonAuth.auth('ddd_student_test_001')" @click="">ccc</el-button>
        </template>
      </RayTable>
  </div>
</template>

<script>
import RayTable from '@/views/template/components/rayTable.vue'
import Tinymce from '@/components/tinymce/tinymce.vue'

export default {
  name: 'Single',
  components: {
    RayTable,
    Tinymce
  },
  data() {
    return {
      value: '',
      custom_columns: [
        {
          order_num: 1000,
          field: 'test1',
          title: '测试字段1',
          slots: {
            default: 'test1'
          }
        },
        {
          order_num: 2000,
          field: 'test2',
          title: '测试字段2',
          slots: {
            default: 'test2'
          }
        },
        {
          order_num: 3000,
          field: 'test3',
          title: '测试字段3',
          slots: {
            default: 'test3'
          }
        }
      ],
      right_menu: {
        header: {
          options: [[{ code: 'exportAll', name: '导出所有.csv', prefixIcon: 'vxe-icon-download', visible: true, disabled: false }]]
        },
        body: {
          options: [[{ code: 'clear', name: '清除内容', visible: true, disabled: false }, { code: 'reload', name: '刷新表格', visible: true, disabled: false }]]
        }
      }
    }
  },
  watch: {},
  created() {
    this.menu = this.$route.meta.query
    this.tableHeight = document.documentElement.clientHeight - 250
  },
  methods: {
    meanNum(list, field) {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count / list.length
    },
    sumNum(list, field) {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count
    },
    sum({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '平均'
          }
          if (['statu'].includes(column.property)) {
            return this.meanNum(data, column.property)
          }
          return null
        }),
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          if (['statu'].includes(column.property)) {
            return this.sumNum(data, column.property)
          }
          return null
        })
      ]
    },
    menuClick({ row, menu }) {
      if (menu.code === 'reload') {
        this.$refs.table.getData()
      }
    }
  }
}
</script>

<style></style>
